<template>
  <el-button @click="JsonDownload" icon="el-icon-download"></el-button>
</template>

<script>
  export default {
    props: {
      dataExport: {
        type: Object,
        required: true
      },
    },
    data: () => {
      return {
        fileName: 'data',
        jsonText: '',
        a: document.createElement('a'),
      }
    },
    methods: {
      JsonDownload () {
        this.$Modal.confirm({
          render: (h) => {
            return h('Input', {
              props: {
                value: this.fileName,
                placeholder: '请输入文件名',
                autofocus: true
              },
              on: {
                input: (val) => {
                  this.fileName = val;
                }
              }
            })
          },
          onOk: () => {
            this.jsonText = JSON.stringify(this.dataExport, null, 4)
            this.a.download = this.fileName + '.json'
            this.a.href = window.URL.createObjectURL(new Blob([this.jsonText], {type: 'text/json' }))
            this.a.dispatchEvent(new MouseEvent('click'))
          }
        })
      }
    }
  }
</script>